<!--耿会芳-->
<!--2017-12-13-->
<template>
    <el-row>
        <!--搜索 start-->
        <el-col :span="24" class="toolbar">
            <el-form :inline="true">
                <el-form-item label="国家查询">
                    <el-input placeholder="请输入国家名称或代码" v-model="filters.search"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getCountryList">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--搜索 end-->

        <!--国家列表展示 start-->
        <el-col>
            <el-table
                    v-loading="listLoading"
                    :data="countries"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="country_id"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="country_name"
                        label="国家名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="country_code"
                        label="代码">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="country_image"
                        label="图片">
                    <template slot-scope="scope">
                        <a :href="scope.row.full_image" target="_blank">
                            <img :src="scope.row.full_image" class="country-image"/>
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <!--<el-button type="text" size="small">查看</el-button>-->
                        <el-button type="primary" size="small" @click="editForm(scope.row)"
                                   icon="el-icon-edit"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <!--国家列表展示 end-->

        <!--分页 start-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="filters.page"
                    :page-size="filters.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
        <!--分页 end-->

        <!--国家列表编辑 start-->
        <el-col>
            <el-dialog title="提示" width="30%" :visible.sync="visible.editCountries" id="editCountries">
                <div slot="title" class="dialog-title">
                    编辑列表
                </div>
                <el-form label-position="right" label-width="80px" :model="editCountriesForm" ref="editCountriesForm"
                         :rules="editCountriesFormRules">
                    <el-form-item label="编号" prop="country_id">
                        <el-input v-model="editCountriesForm.country_id"></el-input>
                    </el-form-item>
                    <el-form-item label="国家名称" prop="country_name">
                        <el-input v-model="editCountriesForm.country_name"></el-input>
                    </el-form-item>
                    <el-form-item label="代码" prop="country_code">
                        <el-input v-model="editCountriesForm.country_code"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="country_image" style="margin-bottom: 50px;">
                        <el-upload
                                class="avatar-uploader"
                                accept="jpg,png"
                                :action="uploadUrl"
                                ref="editUpload"
                                :headers="fileHeader"
                                :show-file-list="false"
                                :on-success="editAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="oldCountryImage" :src="oldCountryImage" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item class="dialog-footer" style="text-align: center;margin-right: 80px;">
                        <el-button @click="visible.editCountries = false">取 消</el-button>
                        <el-button type="primary" @click="editCountryList" :loading="visible.loading">确 定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-col>
        <!--国家列表编辑 end-->
    </el-row>
</template>

<script>
  import { getCountries, editCountries, uploadCountriesImage } from '../../api/api'

  export default {
    component: {},
    data () {
      return {
        listLoading: false,
        filters: {
          country_id: null,
          search: '',
          pageSize: 10,
          page: 1
        },
        total: 0,
        countries: [],
        visible: {
          editCountries: false,
          loading: false
        },
        editCountriesForm: {
          country_id: '',
          country_name: '',
          country_code: '',
          country_image: ''
        },
        editCountriesFormRules: {},
        oldCountryImage: '',
        // 请求头
        fileHeader: {
          Authorization: `Bearer ${this.$store.state.token}`
        },
        // 图片上传路径
        uploadUrl: uploadCountriesImage
      }
    },
    methods: {
      // 分页条数改变
      handleSizeChange (size) {
        this.filters.pageSize = size
        this.getCountryList()
      },
      // 页码改变
      handleCurrentChange (page) {
        this.filters.page = page
        this.getCountryList()
      },
      // 获取国家列表
      getCountryList () {
        this.listLoading = true
        getCountries(this.filters).then((res) => {
          this.listLoading = false
          console.log(res)
          if (res.status === 1) {
            this.countries = res.data
            this.total = res.totalCount
          }
        })
      },
      // 上传文件验证
      beforeAvatarUpload (file) {
//        console.log(file)
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
          this.$alert('图片上传只能是jpg、png格式!', '错误', {type: 'error'})
          return false
        }
        if (file.size > 1024 * 1000) {
          this.$alert('图片大小不能超过1MB!', '错误', {type: 'error'})
          return false
        }
      },
      // 编辑成功
      editAvatarSuccess (res, file, fileList) {
        console.log(res)
        if (res.status === 1) {
          this.oldCountryImage = res.data.fullUrl
          this.editCountriesForm.country_image = res.data.path
        }
      },
      // 编辑列表
      editForm (row) {
//        console.log(row)
        this.visible.editCountries = true
        this.editCountriesForm = Object.assign({}, row)
        this.oldCountryImage = row.full_image
      },
      // 点击编辑页面的保存
      editCountryList () {
        this.visible.loading = true
        this.$refs['editCountriesForm'].validate(valid => {
          if (valid) {
            this.listLoading = true
            editCountries(this.editCountriesForm).then((res) => {
              console.log(res)
              if (res.status === 1) {
                this.getCountryList()
                this.visible.loading = false
                this.listLoading = false
                this.visible.editCountries = false
                this.$refs['editUpload'].clearFiles()
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
              } else {
                this.$alert('修改失败', '错误', {type: 'error'})
              }
            })
          }
        })
      }
    },
    mounted () {
      this.getCountryList()
    }
  }
</script>


<style scoped>
    .country-image {
        width: 100px;
        height: auto;
        vertical-align: middle;
        margin: 0 0;
    }
    .spe-footer {
        margin-right: 80px !important;
        text-align: center;
    }

    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 100px;
        height: 100px;
        margin-left: 6px;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        font-weight: 400;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        display: block;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .el-table__row {
        height: 50px !important;
    }

    .avatar-uploader[data-v-51ecaf9a] {
        overflow: visible;
    }

    .el-upload__tip {
        position: absolute;
        top: 180px;
        width: 300px;
    }

    .el-button--small, .el-button--small.is-round {
        padding: 9px 20px !important;
    }
</style>

<style>
    #editCountries .el-dialog {
        min-width: 380px;
    }
</style>
